@import '../variable.scss';
@import '../mixins.scss';

.order__confirm {
  @include background;
  .top {
    position: relative;
    height: 1.96rem;
    background-size: 100% 1.59rem;
    background-image: linear-gradient(0deg, rgba(0,145,255,0.00) 4%, $btn-bgColor 50%);;
    background-repeat: no-repeat;
    &__header {
      position: relative;
      padding-top: .2rem;
      line-height: .24rem;
      color: #FFF;
      text-align: center;
      font-size: .16rem;
      &__back {
        position: absolute;
        left: .18rem;
      }
    }
    &__receiver {
      position: absolute;
      left: .18rem;
      right: .18rem;
      bottom: 0;
      height: 1.11rem;
      background: #FFF;
      border-radius: .04rem;
      &__title {
        padding: .16rem 0 .14rem .16rem;
        font-size: .16rem;
        line-height: .22rem;
        color: $content-fontcolor;
      }
      &__address {
        line-height: .2rem;
        padding: 0 .4rem 0 .16rem;
        font-size: .14rem;
        color: $content-fontcolor;
      }
      &__info {
        padding: .06rem 0 0 .16rem;
      }
      &__name {
        margin-right: .06rem;
        line-height: .18rem;
        font-size: .12rem;
        color: $medium-fontColor;
      }
      &__icon {
        position: absolute;
        right: .16rem;
        top: .5rem;
        color: $medium-fontColor;
        font-size: .16rem;
        transform: rotate(180deg);
      }
    }
  }
  .product {
    &__wrapper {
      overflow-y: scroll;
      margin: 0 .18rem;
      position: absolute;
      left: 0;
      right: 0;
      bottom: .6rem;
      top: 2.52rem;
    }
  }
  .order {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    height: .49rem;
    line-height: .49rem;
    background: #FFF;
    &__price {
      flex: 1;
      text-indent: .24rem;
      font-size: .14rem;
      color: $content-fontcolor;
    }
    &__btn {
      width: .98rem;
      background-color: $btn-bgColor;
      color: #FFF;
      text-align: center;
      font-size: .14rem;
    }
  }
  .confirm {
    &__title {
      margin: 0 0 0 .24rem;
      padding-top: .24rem;
      line-height: .26rem;
      font-size: .18rem;
      color: $content-fontcolor;
    }
    &__desc {
      margin-top: .08rem;
      font-size: .14rem;
      color: $medium-fontColor;
    }
    &__btns {
      margin: .24rem .58rem;
      display: flex;
    }
    &__btn {
      flex: 1;
      width: .8rem;
      line-height: .32rem;
      border-radius: .16rem;
      font-size: .14rem;
      &.cancel {
        margin-right: .24rem;
        border: .01rem solid $btn-bgColor;
        color: $btn-bgColor;
      }
      &.confirm {
        background: $btn-bgColor;
        color: #FFF;
      }
    }
  }
  .success {
    text-align: center;
    .icon-check {
      display: block;
      padding-top: .4rem;
      font-size: .4rem;
    }
    &__content {
      margin-top: .2rem;
      font-size: .18rem;
      color: $content-fontcolor;
    }
  }
}
